<style scoped>
  .layout-con {
    height: 100%;
    width: 100%;
  }

  .menu-item span {
    display: inline-block;
    overflow: hidden;
    width: 69px;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
    transition: width .2s ease .2s;
  }

  .menu-item i {
    transform: translateX(0px);
    transition: font-size .2s ease, transform .2s ease;
    vertical-align: middle;
    font-size: 16px;
  }

  .collapsed-menu span {
    width: 0px;
    transition: width .2s ease;
  }

  .collapsed-menu i {
    transform: translateX(5px);
    transition: font-size .2s ease .2s, transform .2s ease .2s;
    vertical-align: middle;
    font-size: 22px;
  }

  .title-top-center {
    text-align: center;

  }

  .title-top-right {
    float: right
  }

  .btn_tools {
    padding: 6px 10px 6px 10px;
    background: #eee;
    border-radius: 20px;
  }

  .ivu-cell-extra {
    color: #ed4014;
  }
</style>

<template>
  <Row type="flex" justify="center" align="top" class="code-row-bg">
    <Col span="1" style="background:#3F88D5;height:100vh;">
      <div class="icons-item" style="height:72px;color:#ffffff;text-align:center;padding:20px 0 100px 0;">
        <Avatar icon="ios-person"/>
      </div>
      <ul style="padding: 0!important;list-style: none!important;">
        <a :href="'/'" class="icons-item"
           style="background:#41A0ED;height:64px;color:#ffffff;text-align:center;padding:10px 0 10px 0;display: block;outline: 0;list-style: none;font-size: 12px;">
          <Icon type="ios-desktop" size="24" style="color:#ffffff;"/>
          <p>管理端</p>
        </a>
        <a class="icons-item"
           style="height:64px;color:#ffffff;text-align:center;padding:10px 0 10px 0;display: block;outline: 0;list-style: none;font-size: 12px;">
          <Icon type="ios-people" size="24" style="color:#ffffff;"/>
          <p>员工端</p>
        </a>
        <a class="icons-item"
           style="height:64px;color:#ffffff;text-align:center;padding:10px 0 10px 0;display: block;outline: 0;list-style: none;font-size: 12px;">
          <Icon type="ios-help-circle" size="24" style="color:#ffffff;"/>
          <p>问题管理</p>
        </a>
      </ul>
    </Col>
    <Col span="4">
      <CellGroup>
        <Cell title="全部单元" to="/"/>
        </Cell>
        <div v-for="item in itemList">
          <Cell v-if="item.unit_id===unit_id" :title="item.city" :label="item.department_name"
                :extra="item.score" :to="{path:'/item/detail',query:{id:item.unit_id}}" selected>
            <Badge :count="item.question_num" slot="extra"/>
          </Cell>
          <Cell v-else :title="item.city" :label="item.department_name" :extra="item.score"
                :to="{path:'/item/detail',query:{id:item.unit_id}}">
            <Badge :count="item.question_num" slot="extra"/>
          </Cell>
        </div>
      </CellGroup>
    </Col>
    <Col span="19" style="background:#f5f7f9;height:100vh;">
      <Layout>
        <Content :style="{padding: '0 16px 16px'}">
          <Breadcrumb :style="{margin: '16px 0'}">
            <Row type="flex" justify="space-between">
              <Col span="8">
                <span style="font-size: 16px;color: rgb(70, 76, 91);line-height: 36px;cursor: pointer" @click="$router.back(-1)"><Icon type="ios-arrow-back" />返回</span>
              </Col>
              <Col span="6" class="title-top-center"
                   style="font-size: 16px; font-weight: bold; color: rgb(70, 76, 91);text-align:center;line-height: 36px">
                2018年8月23日 5S成绩表
              </Col>
              <Col span="10">
                <a type="text" size="large" style="float:right" class="btn_tools">
                  <Icon type="ios-share-alt" size="20"></Icon>
                </a>
                <a :href="'/item/parameter?id='+unit_id" type="text" size="large"
                   style="float:right;margin-right:10px;" class="btn_tools">
                  <Icon type="ios-cog" size="20"></Icon>
                </a>
              </Col>
            </Row>
          </Breadcrumb>
          <!-- 指标板块 -->
          <Card class="quota">
            <div class="titleBack">今日 5S 成绩满分，再接再厉！</div>
            <div class="content">
              <div id="main" style="height:508px;width: 70%;background: #fff"></div>
              <div class="conRight">
                <Card class="cr_con">
                  <div class="crc_left">
                    <span class="crclText ctTitle">生产效率 <span class="ctColor1">3%</span></span>
                    <span class="crclText ctColor">计划时间 <span class="ctColor2">240分钟</span></span>
                    <span class="crclText ctColor">实际时间 <span class="ctColor2">225分钟</span></span>
                  </div>
                  <div class="crc_right"><Icon type="ios-arrow-forward" /></div>
                </Card>
              </div>
            </div>
          </Card>
          <!-- 问题&待处理事项 -->
          <div style="margin-top: 20px">
            <Card>
              <p slot="title">问题&待处理事项</p>
              <div class="conButtons" slot="extra">
                <div :class="0 == chooseQS?'buts chooseButs':'buts'" @click="chooseQSB(0)">全部</div>
                <div :class="1 == chooseQS?'buts chooseButs':'buts'" @click="chooseQSB(1)">待处理</div>
                <div :class="2 == chooseQS?'buts chooseButs':'buts'" @click="chooseQSB(2)">进行中</div>
                <div :class="3 == chooseQS?'buts chooseButs':'buts'" @click="chooseQSB(3)">已完结</div>
              </div>
              <div class="contentDiv">
                <Card class="con">
                  <label class="colorLabel" style="background: #dc4444">红色</label>
                  <div class="times">
                    <div class="timesLeft">18/12/22 14:55 夏宏亮</div>
                    <div class="timesRight">待审批</div>
                  </div>
                  <div class="conText">CAFH-TCF反馈CD539CCB骨架自带支架焊接不良 D4</div>
                </Card>
                <Card class="con">
                  <label class="colorLabel" style="background: #f8a52e">橙色</label>
                  <div class="times">
                    <div class="timesLeft">18/12/22 14:55 夏宏亮</div>
                    <div class="timesRight">待说明</div>
                  </div>
                  <div class="conText needExplain">CAFH-TCF反馈CD539CCB骨架自带支架焊接不良 D4</div>
                </Card>
                <Card class="con">
                  <label class="colorLabel" style="background: #f8a52e">橙色</label>
                  <div class="times">
                    <div class="timesLeft">18/12/22 14:55 夏宏亮</div>
                    <div class="timesRight">待说明</div>
                  </div>
                  <div class="conText needExplain">CAFH-TCF反馈CD539CCB骨架自带支架焊接不良 D4</div>
                </Card>
                <Card class="con">
                  <label class="colorLabel" style="background: #dc4444">红色</label>
                  <div class="times">
                    <div class="timesLeft">18/12/22 14:55 夏宏亮</div>
                    <div class="timesRight">待说明</div>
                  </div>
                  <div class="conText needExplain">CAFH-TCF反馈CD539CCB骨架自带支架焊接不良 D4</div>
                </Card>
                <Card class="con">
                  <label class="colorLabel" style="background: #f8a52e">橙色</label>
                  <div class="times">
                    <div class="timesLeft">18/12/22 14:55 夏宏亮</div>
                    <div class="timesRight">待审批</div>
                  </div>
                  <div class="conText">CAFH-TCF反馈CD539CCB骨架自带支架焊接不良 D4</div>
                </Card>
                <Card class="con">
                  <label class="colorLabel" style="background: #f8a52e">橙色</label>
                  <div class="times">
                    <div class="timesLeft">18/12/22 14:55 夏宏亮</div>
                    <div class="timesRight">待审批</div>
                  </div>
                  <div class="conText">CAFH-TCF反馈CD539CCB骨架自带支架焊接不良 D4</div>
                </Card>
                <div class="more">点击加载更多内容</div>
              </div>
            </Card>
          </div>
        </Content>
      </Layout>
    </Col>
  </Row>
</template>

<script>
  import cookie from 'js-cookie';
  export default {
    name: "scene",
    data() {
      return {
        isCollapsed: false,
        itemList: [],
        itemInfo: [],
        tjList: [],
        unit_id: "",
        chooseQS: 0,
      };
    },
    methods: {
      getData() {
        var uid = cookie.get('uid');
        var token = cookie.get('token');
        var unit_id = localStorage.getItem('middleId')
        if (!unit_id) {
          this.$Message.warning('无参数不能访问');
          return;
          //store.dispatch('setLoginStatus', 0)
          //window.location.reload()
        }
        this.$Loading.start();
        var str = {unit_id: unit_id, loginType: cookie.get('loginType')};
        var strdata = this.$twjsdes.enstr(str);
        this.$http.post(this.$API_URL + '/item/detail', {alldata: strdata.alldata}).then((response) => {
          this.$Loading.finish();
          var res = this.$twjsdes.decrypt(response.data.alldata);
          if (res.status == -1 && res.data.backurl) {
            this.$Modal.warning({
              title: '提示',
              content: '请在企业微信授权登录后使用',
              onOk: () => {
                window.location.href = res.data.backurl
              }
            });

          } else if (res.status != 1) {
            this.$Message.error(res.msg);
          } else {
            console.log(res.data);
            this.itemList = res.data.item_all_list;
            this.itemInfo = res.data;
            this.tjList = res.data.list;
            localStorage.setItem('middleId',res.data.unit_id)
          }
        }).catch(function (error) {
          this.$Modal.error({
            title: '提示',
            content: '网络连接错误，请检查后重试'
          });
          //console.log(error);
        });
      },
      initEchart() {
        let chart = this.$echarts.init(document.getElementById('main'));
        let option = {
          color:['#2cc2ed','#ffcc40','#f87b44','#4191f5','#956bda','#44d0a1','#e75ba4'],
          tooltip: {
            show:false,
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
          },
          legend: {
            orient: 'vertical',
            right: 40,
            top: 200,
            data:['整理占总5S 0%(0次)','清洁占总5S 0%(0次)','素养占总5S 0%(0次)','专项占总5S 0%(0次)','整顿占总5S 0%(0次)','标准占总5S 0%(0次)','安全占总5S 0%(0次)',],
            formatter:function (name) {
              return name;
            },
            textStyle:{
              fontSize: 14,
            }
          },
          series: [
            {
              name:'访问来源',
              type:'pie',
              radius: ['40%', '70%'],
              center: ['30%', '50%'],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: true,
                  position: 'center',
                  formatter:function (argument) {
                    var html;
                    html = '5分';
                    return html;
                  },
                  textStyle:{
                    fontSize: 50,
                    color:'#5fba53'
                  }
                },
                emphasis: {
                  show: false,
                  textStyle: {
                    fontSize: '30',
                    fontWeight: 'bold'
                  }
                },
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
              data:[
                {value:0, name:'整理占总5S 0%(0次)'},
                {value:0, name:'清洁占总5S 0%(0次)'},
                {value:0, name:'素养占总5S 0%(0次)'},
                {value:0, name:'专项占总5S 0%(0次)'},
                {value:0, name:'整顿占总5S 0%(0次)'},
                {value:0, name:'标准占总5S 0%(0次)'},
                {value:0, name:'安全占总5S 0%(0次)'},
              ]
            }
          ],
        };
        chart.setOption(option);
      },
      chooseQSB(index) {
        let self = this
        self.chooseQS = index
      },
      cardClick(index) {
        switch (index) {
          case 0:
            this.$router.push('/item/quota/cost')
            break;
          case 1:
            break;
          case 2:
            break;
          case 3:
            break;
          case 4:
            break;
          case 5:
            break;
        }
      },
    },
    computed: {
      menuitemClasses: function () {
        return [
          'menu-item',
          this.isCollapsed ? 'collapsed-menu' : ''
        ]
      }
    },
    created() {
      window.document.title = 'SCS详情';
      this.getData();
    },
    mounted() {
      this.$nextTick(() => {
        this.initEchart();
      });
    }
  }
</script>

<style lang="less">
  .quota{
    display: flex;
    flex-direction: column;
    padding: 0;
    .ivu-card-body{
      padding: 0;
      .titleBack{
        width: 100%;
        height: 52px;
        line-height: 52px;
        text-align: left;
        background: linear-gradient(to right, #5fba53 , #76d033);
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        color: #fff;
        font-size: 17px;
        padding-left: 21px;
      }
      .content{
        display: flex;
        flex-direction: row;
        background: #f9f9f9;
        .conRight{
          width: 30%;
          display: flex;
          flex-direction: column;
          padding: 20px;
          box-sizing: border-box;
          .cr_con{
            .ivu-card-body{
              width: 100%;
              height: 100%;
              display: flex;
              flex-direction: row;
              justify-content: space-between;
              background: #fff;
              padding: 16px;
              cursor: pointer;
              .crc_left{
                width: 100%;
                display: flex;
                flex-direction: column;
                .crclText{
                  font-size: 13px;
                  color: #222222;
                  .ctColor1{
                    color: #ffb11b;
                  }
                  .ctColor2{
                    color: #222222;
                  }
                }
                .ctColor{
                  color: #666666;
                  margin-bottom: 7px;
                }
                .ctColor:last-child{
                  margin-bottom: 0;
                }
                .ctTitle{
                  margin-bottom: 10px;
                }
              }
              .crc_right{
                display: flex;
                flex-direction: column;
                justify-content: center;
              }
            }
          }
        }
      }
    }
  }
  .cards {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    .cdLeft {
      display: flex;
      flex-direction: column;
      .cl_top {
        font-size: 16px;
        color: #222222;
      }
      .cl_down {
        font-size: 16px;
        color: #666666;
        margin-top: 10px;
        .cld_color {
          color: #ffb11b;
          margin-left: 10px;
        }
        .cld_color2 {
          color: #56b44a;
          margin-left: 10px;
        }
      }
      .special {
        background: #dc4444;
        color: #fff;
        font-size: 13px;
        padding: 2px 4px;
      }
    }
    .cdright {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
  }
  .ivu-card-extra {
    top: 11px;
    .conButtons {
      display: flex;
      flex-direction: row;
      .buts {
        padding: 4px 8px;
        background: #f5f5f5;
        font-size: 14px;
        color: #666666;
        margin-right: 10px;
        cursor: pointer;
        border-radius: 3px;
      }
      .chooseButs {
        background: #3f8fe0;
        color: #fff;
      }
    }
  }
  .ivu-card-body {
    background: #f9f9f9;
    .contentDiv {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      flex-wrap: wrap;
      .con {
        width: 32.5%;
        margin-top: 16px;
        display: flex;
        flex-direction: column;
        position: relative;
        cursor: pointer;
        .colorLabel {
          display: block;
          width: 40px;
          height: 20px;
          line-height: 20px;
          text-align: center;
          font-size: 14px;
          color: #fff;
          position: absolute;
          top: 0;
          left: 16px;
        }
        .times {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          margin-top: 18px;
          margin-bottom: 18px;
          line-height: 18px;
          .timesLeft {
            font-size: 16px;
            color: #666666;
          }
          .timesRight {
            font-size: 18px;
            color: #3f8fe0;
          }
        }
        .conText {
          font-size: 20px;
          color: #222222;
          overflow: hidden;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
        }
        .needExplain {
          color: #dc4444;
        }
      }
      .con:nth-child(1), .con:nth-child(2), .con:nth-child(3) {
        margin-top: 0;
      }
      .more {
        width: 100%;
        height: 60px;
        text-align: center;
        line-height: 60px;
        font-size: 18px;
        color: #999999;
        background: #fff;
        margin-top: 16px;
        cursor: pointer;
      }
    }
  }
</style>
